<template>
    <el-drawer size="30%" v-model="modelValue" title="详情">
        <div class="wf-detail">
            <el-card>
                <el-row>
                    <el-col :span="24">
                        <h3>{{ entity.userName + " 提交的 " + entity.title }}</h3>
                        <div>
                            <el-tag color="primary" v-if="entity.status === 0">审核中</el-tag>
                            <el-tag color="success" v-if="entity.status === 1">已暂停</el-tag>
                            <el-tag color="success" v-if="entity.status === 2">已完成</el-tag>
                            <el-tag color="error" v-if="entity.status === 3">已终止</el-tag>
                        </div>
                    </el-col>
                </el-row>
                <el-divider border-style="dashed" />
                <el-row>
                    <el-col :span="24">
                        <el-form ref="flowForm" label-position="top" :model="entity.data">
                            <el-row :gutter="15" v-for="(row, rowkey) in entity.inputs" :key="rowkey">
                                <el-col v-for="(column, key) in row" :key="key" :span="24 / row.length">
                                    <WorkflowFormItem v-model="entity.data[element.name]" :element="column[key]"
                                        v-for="(element, key) in column" :key="element.id" :disabled="true">
                                    </WorkflowFormItem>
                                </el-col>
                            </el-row>
                        </el-form>
                    </el-col>
                </el-row>
            </el-card>
            <el-divider border-style="dashed" />
            <el-timeline>
                <el-timeline-item v-for="(item, key) in entity.executionRecords" :key="key">
                    <p class="time">{{ item.stepTitle }}</p>
                    <div class="content">
                        <el-timeline>
                            <el-timeline-item v-for="(audit, key) in auditEntity.auditRecords[item.executionPointerId]"
                                :key="key">
                                <AvatarComponent :src="audit.userHeadPhoto"/>
                                <p class="time">
                                    {{ audit.userIdentityName }}
                                    <AuditStatusComponent :status="audit.status" />
                                    <DateComponent :date="audit.auditTime" style="margin-left: 10px" />
                                </p>
                                <div class="content">
                                    <div v-if="audit.status == 0 && auditEntity.needAudit && audit.userId == userId">
                                        <el-input type="textarea" v-model="remark" placeholder="请输入备注" />
                                        <el-divider size="small" style="margin:9px 0px"></el-divider>
                                        <el-button type="success" size="small" style="margin-right: 8px"
                                            @click="submitAudit(item.executionPointerId, true)">同意</el-button>
                                        <el-button type="danger" size="small"
                                            @click="submitAudit(item.executionPointerId, false)">拒绝</el-button>
                                    </div>
                                    <p v-if="audit.status != 0 && audit.remark">备注：{{ audit.remark }}</p>
                                </div>
                            </el-timeline-item>
                        </el-timeline>
                    </div>
                </el-timeline-item>
            </el-timeline>
        </div>
    </el-drawer>
</template>
<script setup lang="ts">
import { auditAsync, getDetailsAsync, getAuditRecordsAsync } from '@/utils/api/workflow/list';
import { WorkflowStatus, type WorkflowAuditDto, type WorkflowDto } from '@/utils/api/workflow/list/type';
import { ref, onMounted, defineModel, defineEmits, computed } from 'vue';
import WorkflowFormItem from '../create/workflow-form-item.vue';
import pinia from '@/stores';
import useUserStore from '@/stores/modules/user';
import { analysisAccessToken } from '@/utils/token';
import { ElMessage } from 'element-plus';
import AuditStatusComponent from './audit-status';
import { AvatarComponent } from '@/components/avatar/index';
import { DateComponent } from '@/components/date/index';
const userStore = useUserStore(pinia);

const userId = computed(() => {
    const token = userStore.tokenData;
    const payloadObj = analysisAccessToken(token!.accessToken);
    return payloadObj.sub;
});
const entity = ref<WorkflowDto>({
    id: '',
    workflowDefinitionId: '',
    version: 0,
    inputs: [],
    userName: '',
    data: {},
    title: '',
    creationTime: new Date(),
    status: WorkflowStatus.Runnable,
    executionRecords: []
});
const auditEntity = ref<WorkflowAuditDto>({
    needAudit: false,
    auditRecords: {}
});
const remark = ref('');
const props = defineProps({
    workflowId: {
        type: String,
        required: true
    }
});
const modelValue = defineModel<boolean>();
const emits = defineEmits<{
    (e: 'onRefresh'): void;
}>();
const onRefresh = () => {
    emits('onRefresh');
};
onMounted(async () => {
    entity.value = await getDetailsAsync(props.workflowId);
    auditEntity.value = await getAuditRecordsAsync(props.workflowId);
});

const submitAudit = async (executionPointerId: string, pass: boolean) => {
    await auditAsync({
        executionPointerId: executionPointerId,
        pass: pass,
        remark: remark.value
    });
    ElMessage.success('提交成功');
    modelValue.value = false;
    onRefresh();
};
</script>
<style scoped lang="scss">
.margin-top-10 {
    margin-top: 10px;
}

.wf-detail {
    height: 100%;

    .el-card {
        border-radius: 0px;
        border: 0px;
    }

    .drawer-footer {
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        border-top: 1px solid #e8e8e8;
        padding: 10px 16px;
        text-align: right;
        background: #fff;
    }

    .el-timeline {
        .time {
            position: relative;

            .small {
                height: 17px;
                line-height: 17px;
                margin-left: 10px;
            }

            .el-timeline {
                .time {
                    span {
                        position: absolute;
                        right: 0px;
                        color: #bbb;
                    }
                }
            }
        }

        .content {
            margin: 10px 5px;
        }
    }
}
</style>